<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ngAnimate插件1</title>
    <link rel="stylesheet" href="../../lib/bootstrap3/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../lib/bootstrap3/css/dashboard.css">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
    <style type="text/css">
    .box{width:200px;height:30px;background-color:#2aabd2;transition:1s all;margin:5px;}
    /*显示操作*/
    .box.ng-enter{opacity:0;}
    .box.ng-enter-active{opacity:1;}
    /*隐藏操作*/
    .box.ng-leave{opacity:1;}
    .box.ng-leave-active{opacity:0;}


        /** -------------------------方式二--------------------------------------**/
    /*显示操作*/
    .box.ng-hide-remove{opacity:0;}
    .box.ng-hide-remove-active{opacity:1;}
    /*隐藏操作*/
    .box.ng-hide-add{opacity:1;}
    .box.ng-hide-add-active{opacity:0;}
</style>
</head>
<body>
<div ng-controller="Aaa">
    <table class="table table-bordered" ng-init="us=[{name:'张三',age:23},{name:'李四',age:43},{name:'王五',age:35},{name:'小六',age:86}]">
        <tr ng-repeat="u in us" class="box">
            <td class="box">{{u.name}}</td><td>{{u.age}}</td>
        </tr>
    </table>
    <input type="checkbox" ng-model="bBtn">
    <div class="box" ng-if="bBtn"></div>
    <div class="box" ng-show="bBtn"></div>
</div>
<script type="text/javascript">
    var m1 = angular.module('myApp',['ngAnimate']);
    m1.controller('Aaa',['$scope','$timeout',function($scope,$timeout){
        $scope.bBtn = true;
        $timeout(function () {
            for(var i=0;i<5;i++){
                $scope.us.push({name:'王'+i,age:30+i});
            }
        },1000);
        $timeout(function () {
            for(var i=0;i<5;i++){
                $scope.us.splice(1,1,1);
            }
        },2000);
    }]);
</script>
</body>
</html>